<template>
        <div class="financialHeadlines">
        <div class="toutiao">
          <h1 class="toutiao-title">| {{product.title}}</h1>
              <el-row>
                <el-col :span="6"><div class="grid-content">
                      <div class="toutiao-tab">
                          <div class="tabcontent">
                            <h1>{{product.content1}}</h1>
                            <div class="showtitle">
                              <p>{{product.p1}}</p>
                              <p>{{product.p2}}</p>
                              <p>{{product.p3}}</p>
                            </div>
                            <div class="contentbuttonbox">
                              <div class="contentbutton" @click="yuyuezixun">预约咨询</div>
                            </div>
                            <div class="newbox">
                              <nuxt-link target="_blank" v-for="(item,index) in learnbox" :key="index" :to="'/post/'+ item.pid" >{{item.name}}</nuxt-link>
                                <nuxt-link target="_blank" v-if="product.index == 0" :to="product.morelink">热门股权投资基金</nuxt-link>
                            </div>
                              <!-- <nuxt-link target="_blank" class="more" to="/equity">{{product.more}}</nuxt-link>-->
                          </div>
                      </div>
                  </div></el-col>
                <el-col :span="18"><div class="grid-content">
                    <div class="project">
                         <div class="producttab">
                            <ul>
                              <li :class="{'cative':fenlei == product.fenlei1}" @click="changetab(product.fenlei1)">{{product.fenlei1}}</li>
                              <li :class="{'cative':fenlei == product.fenlei2}" @click="changetab(product.fenlei2)">{{product.fenlei2}}</li>
                              <li v-if="product.fenlei3 != ''" :class="{'cative':fenlei == product.fenlei3}" @click="changetab(product.fenlei3)">{{product.fenlei3}}</li>
                              <li :class="{'cative':fenlei == product.fenlei4}" @click="changetab(product.fenlei4)">{{product.fenlei4}}</li>
                              <li :class="{'cative':fenlei == product.fenlei5}" @click="changetab(product.fenlei5)">{{product.fenlei5}}</li>
                            </ul>
                         </div>
                         <div class="project1">
                            <div class="noproduct" v-if="productdata.length == 0">
                              暂无产品数据
                            </div>
                            <div class="project-detali" v-for="(item,index) in productdata" :key="index" v-if="index<=1" style="border:none">
                                <div class="imgtitlebox">
                                      <div class="imgtitle">
                                        <img class="back" v-if="index == 0" src="http://img3.tqcaifu.com/img/index-6.png" alt="天沁财富">
                                        <img class="back" v-if="index == 1" src="http://img3.tqcaifu.com/img/index-7.png" alt="天沁财富">
                                        <div v-if="index == 0">{{product.show1}}</div>
                                        <div v-if="index == 1">{{product.show2}}</div>
                                      </div>
                                      <img v-if="item.productCategory == '信托资管'" class="hongbao" src="http://img3.tqcaifu.com/img/hongbao.png" alt="天沁财富">
                                  </div>
                                  <h1>{{ item.name.substring(0,13) }}</h1>
                                  <p>{{ item.coreHighlights }}</p>
                                  <div>
                                    <el-row :gutter="20">
                                      <el-col :span="6">
                                        <div class="grid-content">

                                          <template v-if="item.productCategory == '私募股权'">
                                            <div class="detail" v-if="item.productDeadlinecp !=0">{{item.productDeadlinecp}}</div>
                                            <div class="detail" v-if="item.productDeadlinecp == 0">永续</div>
                                          </template>

                                            <template v-else>
                                            <div class="detail" v-if="item.productExpires !=0">{{item.productExpires}}个月</div>
                                            <div class="detail" v-if="item.productExpires == 0">永续</div>
                                          </template>
                                            
                                            <div class="shoutitle" v-if="item.productCategory == '私募股权'">存续期限</div>
                                            <div class="shoutitle" v-else>产品期限</div>
                                            
                                        </div>
                                      </el-col>

                                      <el-col :span="12">
                                        <div class="grid-content">
                                            <div class="detail" style="color:red;font-size:24px;">{{item.investDirect}}</div>
                                            <div class="shoutitle">投资方向</div>
                                        </div>
                                      </el-col>

                                      <el-col :span="6">
                                        <div class="grid-content">
                                          <div class="detail">{{item.beginMoney}}万</div>
                                          <div class="shoutitle">认购起点</div>                                        
                                        </div>
                                      </el-col>
                                    </el-row>
                                  </div>
                                   <nuxt-link target="_blank" :to="'/product/'+ item.pid"><div class="button">查看详情</div></nuxt-link>
                                 <div v-if="index == 0" class="line"></div>
                             </div>                  
                           </div>        
                    </div>
                </div></el-col>
              </el-row>
        </div>
    </div>
</template>
<script>
import api from "../static/js/api.js";
export default {
  data() {
    return {
      activeName: "second",
      fenlei: ""
      //this.product.fenlei1
    };
  },
  props: {
    product: {
      type: Object,
      default: function() {
        return {};
      }
    },
    learnbox: {
      type: Array,
      default: function() {
        return [];
      }
    },
    productdata: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  computed: {},
  methods: {
    yuyuezixun() {
      if (this.$store.state.nologin) {
        this.$alert("请登录后预约！");
      } else {
        api
          .contactUs({
            phone: this.$store.state.userinfo.mobile,
            name: "预约咨询"
          })
          .then(res => {
            if (res.code == 1) {
              this.$alert(res.msg);
            } else {
              this.$alert(res.msg);
            }
          });
      }
    },
    toproduct(val) {
      this.$router.push("/product/" + val);
    },
    changetab(val) {
      this.fenlei = val;
      this.$emit("changeproduct", { title: this.product.title, val: val });
    }
  },
  mounted: function() {
    document.getElementsByClassName("toutiao-tab")[
      this.product.index
    ].style.background =
      "url(" + this.product.productBack + ")" + "no-repeat";
    document.getElementsByClassName("toutiao-tab")[
      this.product.index
    ].style.backgroundSize =
      "cover";
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.line {
  position: absolute;
  right: -20px;
  width: 1px;
  height: 220px;
  border-right: 1px dashed #ccc;
  bottom: 0;
}
.tabcontent {
  overflow: hidden;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
}
.more {
  display: block;
  position: absolute;
  bottom: 10px;
  right: 10px;
}
.newbox {
  width: 240px;
  margin: 0 auto;
}
.newbox a {
  display: block;
  font-size: 14px;
  line-height: 20px;
}
.newbox a:hover {
  color: #cd9c54;
  font-size: 16px;
}
.contentbuttonbox{
  height: 156px;
  overflow: hidden;
}
.contentbutton:hover {
  background: #cd9c54;
  color: white;
}
.contentbutton {
  width: 130px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  border: 1px solid #cd9c54;
  border-radius: 5px;
  color: white;
  font-weight: 600;
  margin: 76px auto 50px;
  font-size: 18px;
  cursor: pointer;
  animation: breathBtn 3s ease infinite
}
@keyframes breathBtn {
  from {
    transform: scale(1.1)
  }
  50% {
    transform: scale(1)

  }
  to {
       transform: scale(1.1)

  }
}
.showtitle p {
  text-align: center;
  font-size: 16px;
  font-weight: bolder;
  line-height: 22px;
  height: 22px;
}
.noproduct {
  font-size: 24px;
  color: #666666;
  margin-top: 30px;
}
.cative {
  background: #cd9c54;
  color: white !important;
  font-weight: bolder;
}
.producttab ul {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  height: 60px;
  line-height: 60px;
}
.producttab ul li {
  border-radius: 6px;
  font-size: 14px;
  color: black;
  display: inline-block;
  width: 16%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #dfdfdf;
  margin: 20px;
}
.producttab ul li:hover {
  color: white;
  background: #cd9c54;
  font-weight: bolder;
}
.toutiao-title {
  font-size: 22px;
  color: #333333;
  font-size: 22px;
  margin: 10px 0 26px;
  font-weight: bolder;
}
.project-detali {
  border-right: 1px solid #ccc;
  width: 48%;
  height: 100%;
  margin: 0 20px 0;
  position: relative;
}
.project-detali .shoutitle {
  text-align: center;
  margin-top: 20px;
  font-size: 16px;
}
.project-detali .button {
  color: #fff;
  background-color: #cd9c54;
  width: 160px;
  height: 40px;
  margin: 30px auto 0;
  font-size: 16px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  transition: all 0.1s;
}
.project-detali .button:hover {
  transform: scale(1.04);
}
.project-detali .detail {
  text-align: center;
  color: #cd9c54;
  font-size: 20px;
  font-weight: bolder;
  height: 48px;
  line-height: 80px;
}
.project-detali .imgtitle {
  height: 90px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.imgtitlebox {
  overflow: hidden;
}
.project-detali .imgtitlebox:hover .back {
  transform: scale(1.2);
}
.project-detali .imgtitlebox:hover div {
  font-size: 24px;
}
.project-detali .imgtitle .back {
  transition: all 0.5s;
  width: 100%;
  height: 90px;
  position: absolute;
  z-index: 8;
  top: 0;
  left: 0;
}
.project-detali .hongbao {
  z-index: 99;
  width: 76px;
  height: 76px;
  right: -7px;
  top: -5px;
  position: absolute;
}
.project-detali .imgtitle div {
  height: 90px;
  width: 100%;
  line-height: 90px;
  text-align: center;
  position: absolute;
  color: white;
  font-size: 22px;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9;
  top: 0;
  left: 0;
  overflow: hidden;
  transition: all 2s;
}
.project-detali h1 {
  width: 80%;
  text-align: center;
  font-size: 24px;
  font-weight: bolder;
  color: black;
  margin: 18px auto 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: none;
}
.project-detali p {
  height: 56px;
  font-size: 16px;
  line-height: 28px;
  width: 80%;
  margin: 0 auto;
  text-align: center;
  text-indent: 2rem;
  font-weight: bolder;
  color: #808080;
  overflow: hidden;
  text-overflow: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.project {
  height: 464px;
  box-sizing: border-box;
  border: 1px solid #e5e5e5;
}
.project1 {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 20px 0;
}
.tabimg {
  width: 100%;
}
.guanggao {
  max-width: 1400px;
  text-align: center;
  margin: 10px auto;
}
.guanggao img {
  width: 100%;
  height: 150px;
}
.toutiao-tab {
  height: 464px;
  width: 100%;
  position: relative;
  overflow: hidden;
  /* background: url("../static/index/productBack2.jpg") no-repeat 100% 100%; */
  background-size: cover;
  color: white;
}
.toutiao-tab h1 {
  text-align: center;
  font-size: 22px;
  margin: 40px 0 20px;
  color: white;
  font-weight: bolder;
  font-weight: bolder;
}

.toutiao {
  overflow: hidden;
  padding: 30px 0;
  width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}
.financialHeadlines {
  width: 100%;
  background: #fff;
  padding-top: 20px;
}
/* .financialHeadlines:hover {
  box-shadow: 0 0 20px #d9d9d9;
} */
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
